/**
 * 支付管理 支付配置
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>设置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-row class="styrow">
        <!-- <el-col :span="24">
          <el-form-item label="回收时间设置：">
            <el-input size="small" v-model="formInline.name" placeholder="输入名称"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input size="small" v-model="formInline.partner" placeholder="输入商户号"></el-input>
          </el-form-item>
        </el-col> -->
        <!-- <el-form-item>
          <el-select size="small" v-model="formInline.payType" placeholder="请选择">
            <el-option v-for="type in payType" :label="type.key" :value="type.value" :key="type.value"></el-option>
          </el-select>
        </el-form-item> -->
        <el-col class="stycol" > 
          <el-form-item  label="回收时间段：">
            <el-checkbox-group v-model="formInline.checkvalue">
              <el-checkbox v-for="(item, index) in checkboxOptions" :key="index" :label="item.value" :disabled="item.disabled" :checked="item.ischeck" >          
                {{item.label}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col class="stycol">
          <el-form-item label="回收区域：">
            <el-checkbox-group v-model="formInline.districtsvalue">
              <el-checkbox v-for="(item, index) in districtOptons" :key="index" :label="item.index" :disabled="item.disabled" :checked="item.ischeck" >          
                {{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否放假：">
            <!-- <el-checkbox  label="是否放假" @change="saveHoliday" :checked="vacation.isHoliday"> 
              放假 
            </el-checkbox>   -->
            <input type="checkbox" label="是否放假" @change="saveHoliday" :checked="vacation.isHoliday">
          </el-form-item>
          <el-input  style="width: 85%;"  v-model="vacation.Announcement" placeholder="请输入假期公告内容" :disabled="vacation.isDisabled"></el-input>        

        </el-col>
        <el-form-item class="stycol">
          <el-button size="small" type="primary" icon="el-icon-search" @click="saveSetting">保存</el-button>
        </el-form-item>
      </el-row>
    </el-form> 

  </div>
</template>

<script>
import { ConfigTimeSave, ConfigTimeGet, ConfigdistrictsSave, ConfigdistrictsGet, saveCreateVacation, getVacation } from '../../api/basisMG'
export default {
  data() {
    return {
      loading: false, //是显示加载
      title: '添加',
      formInline: {
        page: 1,
        limit: 10,
        name: '',
        payType: 0,
        partner: '',
        checklabel: [],  ////预约时间段配置，确认的最终勾选的值状态
        checkvalue: [], /////预约时间段配置，存储多选项勾选的值 
        timeSave:{
          timeconfig:{}
        }, ////向接口保存预约时间
        districtslabel: [],   /////保存选择的地理区域
        districtsvalue:[],  ////保存选择区域的Index
        districtsSave:{
          "areaid": 1,  //区域的ID
          "areaname" : "浦城县",  //区域名称对象
          "cityname" : {}
        },
        vacationLabel:{
          notice:{}
        },
        vacationValue:[]
      },
      // 接口获取回来的存储在checkboxOptions
      checkboxOptions:[],
      districtOptons:[
        // {"name":'南浦街道',"index":1,"ischeck":true},
        // {"name":'古楼乡',"index":2,"ischeck":true},
        // {"name":'盘亭乡',"index":3,"ischeck":true},
        // {"name":'忠信镇',"index":4,"ischeck":true},
        // {"name":'临江镇',"index":5,"ischeck":true},
        // {"name":'官路乡',"index":6,"ischeck":true},
        // {"name":'仙阳镇',"index":7,"ischeck":true},
        // {"name":'水北街镇',"index":8,"ischeck":true},
        // {"name":'石陂镇',"index":9,"ischeck":true},
        // {"name":'山下乡',"index":10,"ischeck":true},
        // {"name":'管厝乡',"index":11,"ischeck":true},
        // {"name":'九牧镇',"index":12,"ischeck":true},
        // {"name":'富岭镇',"index":13,"ischeck":true},
        // {"name":'永兴镇',"index":14,"ischeck":true},
        // {"name":'枫溪乡',"index":15,"ischeck":true},
        // {"name":'濠村乡',"index":16,"ischeck":true},
        // {"name":'万安乡',"index":17,"ischeck":true},
        // {"name":'莲塘镇',"index":18,"ischeck":true},
        // {"name":'河滨街道',"index":19,"ischeck":true},
        // {"name":'岳峰镇',"index":20,"ischeck":true},
      ],
      // 放假公告
      vacation:{
        isHoliday : true,
        isDisabled : false,
        Announcement : ''
      }      
    }
  },
  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取设置内容
    getdata(parameter) {
      this.loading = true
      /***
       * 调用接口，获取预约时间段
       */
       ConfigTimeGet(this.formInline)
        .then(res => {
          // console.log('checkboxOptions-2:', res)
          this.loading = false
          if (res.data == '') {
            this.$message({
              type: 'info',
              message: "时间段数据为空"
            })
          } else {
            this.checkboxOptions = []
            this.checkboxOptions = res.data.data.timeconfig
            // console.log('checkboxOptions-3:', res)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('加载失败，请稍后再试！')
        })

       /***
       * 调用接口，获取区域
       */
       ConfigdistrictsGet(this.formInline)
        .then(res => {
          // console.log('ConfigdistrictsGet:', res)
          this.loading = false
          if (res.data == '') {
            this.$message({
              type: 'info',
              message: "地理区域数据为空"
            })
          } else {
            this.districtOptons = []
            this.districtOptons = res.data.data.arealist[0].city_name
            // console.log('ConfigdistrictsGet-1:', res.data.data.arealist[0].city_name)
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('加载失败，请稍后再试！')
        }) 

       /***
       * 调用接口，放假公告
       */ 
      getVacation().then(res=>{        
        let vacationtmp = res.data.data.notices.notice_msg
        this.vacation = vacationtmp
        console.log('getVacation:', this.vacation,vacationtmp.isHoliday,vacationtmp.isDisabled)
      }) 
    },
    // 保存设置内容
    saveSetting(){
      // 保存预约时间段
       this.saveTimeSet()
      // 保存地理区域 
       this.saveDistricts()
      // 保存放假公告
       this.saveVacation()

    },
    // 保存区域
    saveDistricts(){
      // console.log('saveDistricts-1:', this.formInline)
      this.formInline.districtslabel=[]
      let leg = this.districtOptons.length
      // 对多选框的内容进行排序，若不进行排序，再取消后重新打勾的状态得不到更新
      this.formInline.districtsvalue = this.formInline.districtsvalue.sort((a,b)=>{return a-b})
      let j = 0
      // 循环判断勾选状态
      for (var i=0; i<leg; i++){
          if(this.districtOptons[i].index != this.formInline.districtsvalue[j]){
            this.districtOptons[i].ischeck = false
          }
          else{
            this.districtOptons[i].ischeck = true
            j += 1
          }
      }
      // 将结果保存入checklabel,主要用于将其调用接口存入数据库
      this.formInline.districtslabel = this.districtOptons
      // 保存调用接口
      this.formInline.districtsSave.cityname = this.formInline.districtslabel
      // console.log('saveDistricts-2:', this.formInline)
      // 调用保存区域接口
      ConfigdistrictsSave(this.formInline.districtsSave).then(res =>{
          console.log('saveDistricts:', res)
      })
    },     
    // 保存预约时间段
    saveTimeSet(){
      this.formInline.checklabel=[]
      let leg = this.checkboxOptions.length
      // 对多选框的内容进行排序，若不进行排序，再取消后重新打勾的状态得不到更新
      this.formInline.checkvalue = this.formInline.checkvalue.sort((a,b)=>{return a-b})
      let j = 0
      // 循环判断勾选状态
      for (var i=0; i<leg; i++){
          if(this.checkboxOptions[i].value != this.formInline.checkvalue[j]){
            this.checkboxOptions[i].ischeck = false
          }
          else{
            this.checkboxOptions[i].ischeck = true
            j += 1
          }
      }
      // 将结果保存入checklabel,主要用于将其调用接口存入数据库
      this.formInline.checklabel = this.checkboxOptions
      // console.log('ConfigTimeSave-checklabel:', this.formInline)
      // 出确认打勾的时间段，以提供给小程序端使用
      // this.formInline.checktime = []
      // for(var p=0; p<this.formInline.checklabel.length; p++){
      //   console.log('saveSetting-3:', this.formInline.checklabel[p].ischeck )
      //   if (this.formInline.checklabel[p].ischeck == true){
      //     this.formInline.checktime.push(this.formInline.checklabel[p].label)

      //   }
      // }
      // 保存调用接口
      this.formInline.timeSave.timeconfig = this.formInline.checklabel
      ConfigTimeSave(this.formInline.timeSave).then(res =>{
          console.log('ConfigTimeSave:', res)
      })
      // console.log('saveSetting:', this.timeSave.timeconfig)

    },

    // 保存放假公告内容
    saveVacation(){
      // 将放假内容进行赋值保存
      // this.formInline.vacationValue.push(this.vacation)
      this.formInline.vacationLabel.notice = this.vacation
      // console.log('ConfigTimeSave-5:', this.vacation , this.formInline)
      // 保存放假公告接口
      saveCreateVacation(this.formInline.vacationLabel).then(res=>{
        console.log('vacationLabel:', res)
        if (res.msg == '创建通知消息查询成功'){
          this.$message({
              type: 'info',
              message: "设置数据保存成功！"
            })
        }
      })
      .catch(err => {
          this.loading = false
          this.$message.error('保存失败，请稍后再试！')
        }) 

    },
    
    // 保存放假公告
    saveHoliday(){
      console.table('holiday-1:',this.vacation)      
      this.vacation.isDisabled = this.vacation.isHoliday
      this.vacation.isHoliday =  ! this.vacation.isHoliday
    },

    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          ConfigSave(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              if (res.success) {
                this.getdata(this.formInline)
                this.$message({
                  type: 'success',
                  message: '公司保存成功！'
                })
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('支付配置信息保存失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },   
    // 关闭编辑、增加弹出框
    closeDialog(formName) {
      this.editFormVisible = false
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
  .userRole {
    width: 100%;
  }
/* 
  .styrow{
    border: 1px solid #ccc;
  }

  .stycol{
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
    line-height: 14px;
  } */

</style>

 
 